<%--
  Created by IntelliJ IDEA.
  User: 晓东√
  Date: 2024/9/4 0004
  Time: 10:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src='${pageContext.request.contextPath}/js/jquery.js'></script>
<html>
<head>
    <title>书籍管理</title>
    <style>
    </style>
</head>
<body>
    <div>
        <div><h2>书籍列表</h2></div>
        <div>
            书籍名称：<input type="text" id="bookName"/>
            作者：<input type="text" id="author"/>
            <button onclick="search()">搜索</button>
        </div>
        <div>
            <button onclick="addclick()">新增</button>
        </div>
        <div>
            <table border="1px" width="800px" cellspacing="0">
                <tr>
                    <td>编号</td>
                    <td>图片</td>
                    <td>书籍名称</td>
                    <td>作者</td>
                    <td>ISBN</td>
                    <td>出版社</td>
                    <td>出版时间</td>
                    <td>数量</td>
                    <td>描述</td>
                    <td>操作</td>
                </tr>
            </table>
            <div id="pageDiv">

            </div>
        </div>
    </div>
</body>
</html>
<script>
    function onloadPage(bookName,author,pageNum){
        let data ={
            bookName,
            author,
            pageNum
        }
        $.ajax({
            url: '/book.action',
            type: 'post',
            data: data,
            dataType: 'json',
            success: bookList,
            'error': function () {
                alert("查询失败！请联系管理员")
            }
        })
    }
    function bookList(data){
        console.log(data);
        //清空table
        $("table tr:not(:first-child)").empty();
        $("#pageDiv").empty();
        data.dataList.forEach(dd => {
            $('table').append(`<tr>
            <td>`+dd.bookId+`</td>
            <td>`+dd.coverImage+`</td>
            <td>`+dd.bookName+`</td>
            <td>`+dd.author+`</td>
            <td>`+dd.isbn+`</td>
            <td>`+dd.publisher+`</td>
            <td>`+dd.publishDate+`</td>
            <td>`+dd.stockQuantity+`</td>
            <td>`+dd.description+`</td>
            <td>
                <button onclick='editBook(` + dd.bookId + `)'>编辑</button>
                <button>删除</button>
            </td>
        </tr>`)
        })

        $('#pageDiv').append(`
                <button onclick="pageLoad(1)">首页</button>
                <button id="upPage" onclick="pageLoad(`+(data.pageNum-1)+`)">上一页</button>
                <span>`+data.pageNum+`/`+data.countPage+`</span>
                <button id="downPage" onclick="pageLoad(`+(data.pageNum+1)+`)">下一页</button>
                <button onclick="pageLoad(`+(data.countPage)+`)">尾页</button>`);

        if(data.pageNum==1){
            $('#upPage').attr('disabled',true);
        }else {
            $('#upPage').removeAttr('disabled')
        }
        if(data.pageNum==data.countPage){
            $('#downPage').attr('disabled',true);
        }else {
            $('#downPage').removeAttr('disabled')
        }
    }

    window.onload = onloadPage('','',1);

    //点击搜索
    function search(){
        let bookName = $("#bookName").val();
        let author = $("#author").val();
        onloadPage(bookName,author,1);

    }
    function pageLoad(pageNum) {
        let bookName = $("#bookName").val();
        let author = $("#author").val();
        onloadPage(bookName,author,pageNum);
    }

    function editBook(id){
        sessionStorage.setItem('id', id);
        window.location.href = "EditBook.jsp";
    }

    function addclick(){
        sessionStorage.setItem('id', '');
        window.location.href = "EditBook.jsp";
    }

</script>